<template>
  <div class="add-equip">
    <el-form class="add-equip-left" label-width="90" :model="form">
      <el-form-item label="驱动盘位置">
        <el-select v-model="form.slot" placeholder="请选择">
          <el-option
            v-for="item in 6"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="套装">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in config.equipSuitList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-for="(item, idx) in config.propertiesList"
        :key="idx"
        :label="item"
      >
        <el-select v-model="form[item]" clearable placeholder="无该属性">
          <el-option
            v-for="item in [1, 2, 3, 4, 5, 10]"
            :key="item"
            :label="propertiesLabel(item)"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item class="column-all" label="总分">
        <el-input v-model.trim="form['总分']" placeholder="等待计算" />
      </el-form-item>
    </el-form>

    <div class="add-equip-right">
      <el-button type="primary" @click="add">添 加</el-button>

      <el-button type="info" @click="edit">修 改</el-button>

      <el-button type="danger" @click="remove">删 除{{ form.id }}</el-button>

      <el-button type="success" @click="plusEquip">装 备</el-button>
    </div>
  </div>
</template>

<script>
  import { extend } from '@/utils/tool.js'

  export default {
    props: {
      modelValue: {
        type: Object,
        required: true,
        default: () => {
          return {}
        },
      },

      config: {
        type: Object,
        required: true,
        default: () => {
          return {
            equipSuitList: ['云岿如我', '啄木鸟电音', '折枝剑歌'],

            // 属性系数
            coeff: {
              暴击率: 1.57,
              暴击伤害: 1.57,
              生命值: 0.85,
              攻击力: 0.49,
              小攻击: 0.19,
              小生命: 0.38,
            },

            propertiesList: [
              '暴击率',
              '暴击伤害',
              '生命值',
              '攻击力',
              '小攻击',
              '小生命',
            ],
          }
        },
      },
    },

    data() {
      return {}
    },

    computed: {
      form: {
        get() {
          return this.modelValue
        },

        set(newVal) {
          this.$emit('update:modelValue', newVal)
        },
      },
    },

    // 监控source的数据更改,更改时写入浏览器缓存
    watch: {
      form: {
        deep: true,
        handler() {
          // 计算'总分'
          let total = 0
          for (let f1 in this.config.coeff) {
            if (!this.form[f1] && this.form[f1] !== 0) {
              continue
            }

            let coeff = this.config.coeff[f1]
            let val = coeff * this.form[f1]
            total += val
          }

          // 四舍五入,保留2位小数
          total = Math.round(total * 100) / 100
          total = Number(total)

          this.form['总分'] = total
        },
      },
    },

    methods: {
      add() {
        this.form.id = new Date().getTime()
        this.$emit('add', this.form)
      },

      edit() {
        this.$emit('edit', extend(this.form))
        this.form = {}
      },

      remove() {
        this.$emit('remove', this.form.id)
      },

      propertiesLabel(item) {
        if (item < 2) {
          return '✔'
        }

        if (item > 9) {
          return '10'
        }

        return `+${item - 1}`
      },

      plusEquip() {
        let equip = extend(this.form)

        this.$emit('plusEquip', equip)
      },
    },
  }
</script>

<style scoped>
  /* 原来的样式可以直接复用 */
  .column-all {
    grid-column: 1 / -1;
  }
  .add-equip {
    display: grid;
    grid-template-columns: 380px;
    gap: 20px;

    /* border-left: 1px solid #494848; */
    padding: 20px;

    /* 左则阴影 */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .add-equip-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
  }
  .add-equip-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  :deep(.el-button) {
    margin-left: 0;
  }
</style>
